import { Text } from '@react-navigation/elements';
import { Pressable, View, StyleSheet  } from 'react-native';
import { getTheme } from '../../../theme';
import { px2dp } from '../../../utils/pixel-adapter';

export function Header() {
    return (
        <View style={styles.header}>
           <View style={styles.headerLeft}>
             <Text style={[{ fontFamily: 'iconfont' }, styles.headerLeftIcon]}>{'\ue600'}</Text>
             <Text style={styles.headerLeftText}>音乐</Text>
           </View>
           <Pressable style={({ pressed }) => {
            return [styles.searchBox, pressed && styles.searchBoxPressed];
           }}>
             <Text style={[{ fontFamily: 'iconfont' }, styles.searchIcon]}>{'\ue6b5'}</Text>
           </Pressable>
        </View>
    );
}

const theme = getTheme();


const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 16,
    },
    headerLeft: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    headerLeftIcon: {
        color: theme.subcolor,
        fontSize: px2dp(26),
    },
    headerLeftText: {
        color: '#fff',
        fontSize: px2dp(20),
        marginLeft: px2dp(10),
        fontWeight: 'bold',
    },
    searchBox: {
        width: px2dp(40),
        height: px2dp(40),
        justifyContent: 'center',
        alignItems:'center',
        borderRadius: px2dp(8),
    },
    searchBoxPressed: {
        backgroundColor: 'rgba(173, 172, 172, 0.5)',
    },
    searchIcon: {
        color: '#fff',
        fontSize: px2dp(26),
    }
})